<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
<div @click="btnclick">按钮</div>
<diV @click="counter++">按钮 counter++</diV>
<div @click="btnclick(num)">按钮btnclick(2)</div>
<div @click="btnclick2(2,$event)">按钮btnclick2(2,$event)</div>
<div @click="btnclick($event),btnclick1(2)">按钮btnclick(),btnclick1(2)</div>
<div @click="divclick1">
<div @click.stop="divclick2">.stop div-button</div>
</div>
<div @click.self="divclick1">
    {{counter}}
    <div @click="divclick2">.self div-button</div>
</div>
<div @click.once="divclick2">.once div-button</div>
<a href="https://www.nxu.edu.cn" @click="divclick2">宁夏大学</a>
<div @click.capture="divclick1">
    divclick1-->{{counter}}
    <div @click="divclick2">.capture div-button</div>
</div>
    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app=Vue.createApp({
    data(){
        return{
            counter:0
        }
    },
    methods:{
        btnclick(){
            this.counter++
        },
        btnclick(num){
            this.counter+=num
        },
        btnclick2(num,$event){

        }


    }
}).mount("#app")
</script>
</html>